<template>
  <a-row class="videoClassroom w1200">
    <a-col :span="12" class="videoBox">
      <supplier-display-header style="padding: 25px 20px;" title="视频课堂" @more="toVideoMore"></supplier-display-header>
      <div class="videoClassroomBox">
        <div class="videoClassroomItem" @click="playVideo(item)" v-for="(item, index) in videoList" :key="index">
          <img class="videoImg" :src="item.videoMainImg" />
          <div class="videoName">{{ item.videoName }}</div>
          <div class="videoInfo">
            <div>
              <img class="icon" src="@/assets/images/supplierDisplayCenter/icon7.png" />
              <span>{{ item.publisher }}</span>
            </div>
            <div>
              <img class="icon" src="@/assets/images/supplierDisplayCenter/icon8.png" />
              <span>{{ item.viewCounts }}</span>
              <img class="icon" src="@/assets/images/supplierDisplayCenter/icon9.png" />
              <span>{{ item.videoScore }}</span>
            </div>
          </div>
        </div>
      </div>
    </a-col>
    <a-col :span="11" offset="1" class="chartsBox">
      <supplier-display-header :showMore="false" style="padding: 25px 20px;" title="中标排行榜">
        <span slot="action">
          <a-radio-group default-value="1" v-model="supplierCategory" button-style="solid">
            <a-radio-button value="1">
              货物
            </a-radio-button>
            <a-radio-button value="2">
              服务
            </a-radio-button>
            <a-radio-button value="3">
              工程
            </a-radio-button>
          </a-radio-group>
        </span>
      </supplier-display-header>
      <div class="chartsWrap">
        <a-table :pagination="false" :columns="columns" :data-source="data">
          <div slot="rank" slot-scope="text,records,index">
            <img class="icon" :src="require(`@/assets/images/supplierDisplayCenter/top${index + 1}.svg`)" />
            <div slot="num"  slot-scope="text,records,index">
              <span v-if="isLogin">{{ text }}</span>
              <span v-else>***</span>
            </div>
          </div>
        </a-table>
      </div>

    </a-col>
  </a-row>
</template>
        
<script>
import SupplierDisplayHeader from './SupplierDisplayHeader'
import storage from '@/utils/storage'
import { videoClassroomListPage } from '@/api/video'
import { rankingListPage } from '@/api/portal'

const columns = [
  {
    title: '排名',
    dataIndex: 'rank',
    key: 'rank',
    width: 80,
    align: 'center',
    scopedSlots: {
      customRender: 'rank'
    }
  },
  {
    title: '供应商名称',
    dataIndex: 'supplierName',
    key: 'supplierName',
    align: 'center'
  },
  {
    title: '主营业务',
    dataIndex: 'mainBiz',
    key: 'mainBiz',
    align: 'center'
  },
  {
    title: '中标次数',
    key: 'num',
    dataIndex: 'num',
    align: 'center',
    scopedSlots: {
      customRender: 'num'
    }
  }
];
export default {
  name: 'selectedSuppliers',
  components: {
    SupplierDisplayHeader
  },
  data() {
    return {
      columns,
      data:[],
      supplierCategory: '1',
      videoList: [],
      isLogin: storage.session.get('isLogin') && storage.session.get('authToken'),

    }
  },

  mounted() {
    this.loadData()
    this.rankingPage()
  },
  methods: {
    toVideoMore() {
      this.$router.push({
        path: "/videoClassroomList",

      });
    },
    playVideo(item) {
      let routeData = this.$router.resolve({
        path: "/videoPlay",
        query: { videoMainImg: item.videoMainImg, videoUrl: item.videoUrl }
      });
      window.open(routeData.href, "_blank");
    },
    loadData() {
      videoClassroomListPage({ page: 1, limit: 4,status: '1' }).then(res => {
        if (res.code == 0) {
          this.videoList = res.data.records
        }
      })

    },
    rankingPage() {
      rankingListPage({ page: 1, limit: 9, supplierCategory: this.supplierCategory }).then(res => {
        if(res.code == 0) {
          this.data = res.data.records
        }
      })
    }
  },
  watch: {
    supplierCategory() {
      this.rankingPage()
    }
  }
}
</script>
        
<style scoped lang="scss">
$mainColor: #3370FF;

/deep/ .ant-table-thead>tr>th,
/deep/ .ant-table-tbody>tr>td {
  padding: 10px 16px;
}

/deep/ .ant-radio-button-wrapper {
  line-height: 28px;
}
/deep/ .ant-table-placeholder {
  height: 395px;
}

.videoClassroom {
  margin: 40px auto !important;
}

.videoBox {
  background-color: #fff;
  box-shadow: 0px 4px 20px 0px rgba(0, 120, 254, 0.1);
  border-radius: 10px;

  .videoClassroomBox {
    padding: 0px 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .videoClassroomItem {
    width: 265px;
    // height: 215px;
    border-radius: 4px;
    opacity: 1;
    margin-bottom: 20px;
    cursor: pointer;
    /* 灰度/纯白 */
    background: #FFFFFF;

    box-sizing: border-box;
    /* 灰度/组件线框 */
    border: 0.5px solid #E2E2E2;

    /* 投影/投影S */
    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.05);

    .videoImg {
      width: 100%;
      height: 135px;
      border-radius: 4px;

    }

    .videoInfo {
      padding: 0px 10px 10px;

      display: flex;
      justify-content: space-between;
    }

    .videoName {
      padding: 5px 10px;
    }
  }
}

.chartsBox {
  background-color: #fff;
  box-shadow: 0px 4px 20px 0px rgba(0, 120, 254, 0.1);
  border-radius: 10px;

  .chartsWrap {
    height: 436px;
  }
}
</style>
        